@charset "UTF-8";
@keyframes spinner-border {
    to {
        transform: rotate(360deg)
    }
}

@keyframes spinner-glow {
    0% {
        transform: scale(0)
    }
    50% {
        opacity: 1
    }
}

@keyframes fading {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes spin {
    0% {
        transform: rotateZ(0deg)
    }
    to {
        transform: rotateZ(360deg)
    }
}

@keyframes shake {
    0% {
        transform: rotateZ(-50deg)
    }
    to {
        transform: rotateZ(50deg)
    }
}

@keyframes zoom-in {
    0% {
        transform: scale(0)
    }
    to {
        transform: scale(1)
    }
}

@keyframes drop {
    0% {
        opacity: 0;
        margin-top: -10px
    }
    to {
        opacity: 1;
        margin-top: 0
    }
}

@keyframes glowing_red {
    0%,
    to {
        background-color: #b20000;
        box-shadow: 0 0 3px #b20000
    }
    50% {
        background-color: red;
        box-shadow: 0 0 10px red
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body,
html {
    height: 100%;
    width: 100%
}

body {
    font-size: 16px;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    top: 0 !important
}

a:active,
a:focus,
a:hover {
    text-decoration: none
}

ol,
ul {
    list-style-position: inside
}

img {
    max-width: 100%
}

#wrapper {
    width: 100%;
    height: auto;
    min-height: 95%
}

.relative {
    position: relative
}

.droplistitems {
    position: absolute;
    min-width: 100%;
    z-index: 20
}

.cus-pointer:hover {
    cursor: pointer
}

.space-a-10 a,
.space-a-5 a {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px
}

.space-a-10 a {
    padding-left: 10px;
    padding-right: 10px
}

.goog-te-gadget-simple {
    padding: 10px !important;
    color: #000119;
    box-shadow: 0 2.1px 1.3px rgba(0, 0, 0, .044), 0 5.9px 4.2px rgba(0, 0, 0, .054), 0 12.6px 9.5px rgba(0, 0, 0, .061), 0 32px 17px rgba(0, 0, 0, .1);
    font-weight: 700;
    border-color: #eee !important;
    display: inline-block !important
}

.goog-te-menu-value {
    color: #000119 !important
}

.goog-te-gadget-simple>img,
.material-switch input[type=checkbox] {
    display: none
}

.goog-te-menu-frame {
    box-shadow: none !important;
    width: 159px !important
}

.goog-te-banner-frame.skiptranslate,
.goog-tooltip,
.goog-tooltip:hover {
    display: none !important
}

.goog-te-menu2 {
    border-color: #eee !important;
    box-shadow: 0 2.1px 1.3px rgba(0, 0, 0, .044), 0 5.9px 4.2px rgba(0, 0, 0, .054), 0 12.6px 9.5px rgba(0, 0, 0, .061), 0 32px 17px rgba(0, 0, 0, .1);
    width: auto !important
}

.goog-te-menu2-item .text,
.goog-te-menu2-item div,
.goog-te-menu2-item:active div,
.goog-te-menu2-item:link div,
.goog-te-menu2-item:visited div {
    color: #9d9da0 !important
}

.goog-te-menu2-item:hover div {
    color: #000119 !important;
    background: 0 0 !important
}

.goog-te-balloon *,
.goog-te-banner *,
.goog-te-combo,
.goog-te-ftab *,
.goog-te-menu *,
.goog-te-menu2 * {
    font-weight: 700
}

.foot-nav-title {
    display: block
}

.foot-nav ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.foot-nav ul a {
    display: inline-block;
    padding: 10px 0;
    line-height: 12px
}

.accept-cookie {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 2500;
    width: 100%;
    font-size: 14px
}

.accept-cookie div {
    width: 80%;
    padding: 16px 5px;
    margin: 0 auto
}

.btn-special {
    display: inline-block;
    cursor: pointer;
    border-radius: 4px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 2px solid transparent;
    padding: .375rem .75rem;
    font-size: .875rem;
    line-height: 1.5;
    transition: all .2s ease-in-out 0s
}

.btn-special:hover {
    border-color: rgba(121, 112, 112, .3)
}

.btn-special:active {
    box-shadow: 1px 5px 10px rgba(130, 103, 103, .4) inset;
    border-color: rgba(130, 103, 103, .3)
}

.btn-special.disabled {
    opacity: .8
}

.btn-special.disabled:hover {
    cursor: not-allowed
}

.btn-special.btn-bsm {
    padding: 10px 30px
}

.btn-special.btn-ssm {
    padding: 5px 10px;
    font-size: 12px
}

.btn-special.btn-block {
    display: block;
    width: 100%
}

.border-0 {
    border: 0
}

.border {
    border: 1px solid gray
}

.border-top {
    border-top: 1px solid gray
}

.border-bottom {
    border-bottom: 1px solid gray
}

.border-left,
.separator {
    border-left: 1px solid gray
}

.border-right {
    border-right: 1px solid gray
}

@media screen and (max-width:767px) {
    .border-left,
    .border-right,
    .separator {
        border: 0
    }
}

.border-white {
    border-color: #fff !important
}

.border-black {
    border-color: #07090b !important
}

.border-red {
    border-color: #dc261b !important
}

.border-green {
    border-color: #20b2aa !important
}

.border-deep-green {
    border-color: #004d33 !important
}

.border-light-green {
    border-color: #00c242 !important
}

.border-blue {
    border-color: #308ee0 !important
}

.border-hi-blue {
    border-color: #00477e !important
}

.border-orange {
    border-color: #e06000 !important
}

.border-brown {
    border-color: #633517 !important
}

.border-grey {
    border-color: gray !important
}

.border-light-grey {
    border-color: #d3d3d3 !important
}

.border-dark-grey {
    border-color: #5a5c68 !important
}

.border-lighter {
    border-color: #f5f5f5 !important
}

.border-dashed {
    border-style: dashed !important
}

.border-ridge {
    border-style: ridge !important
}

.border-inset {
    border-style: inset !important
}

.border-outset {
    border-style: outset !important
}

.border-groove {
    border-style: groove !important
}

.border-sm {
    border: 2px solid
}

.border-md {
    border: 5px solid
}

.border-lg {
    border: 10px solid
}

.zero-radius {
    border-radius: 0
}

.circle {
    border-radius: 50%
}

.round {
    border-radius: .25rem
}

.round-md {
    border-radius: 15px
}

.bottom-radius {
    border-radius: 0 0 15px 15px !important
}

.top-raduis {
    border-radius: 15px 15px 0 0 !important
}

.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: .25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border .75s linear infinite
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: .2em
}

.spinner-glow {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    background-color: currentColor;
    border-radius: 50%;
    opacity: 0;
    animation: spinner-grow .75s linear infinite
}

.spinner-glow-sm {
    width: 1rem;
    height: 1rem
}

.hover-white:hover,
.white {
    background: #fff !important;
    color: #07090b !important;
    transition: all .3s linear 0s
}

.black,
.hover-black:hover {
    background: #07090b !important
}

.black,
.green,
.hover-black:hover,
.hover-green:hover,
.hover-red:hover,
.red {
    color: #fff !important;
    transition: all .3s linear 0s
}

.hover-red:hover,
.red {
    background: #dc261b !important
}

.green,
.hover-green:hover {
    background: #20b2aa !important
}

.deep-green,
.hover-deep-green:hover {
    background: #004d33 !important;
    color: #fff !important;
    transition: all .3s linear 0s
}

.hover-light-green:hover,
.light-green {
    background: #00c242 !important;
    color: #fff !important;
    transition: all .3s linear 0s
}

.blue,
.hover-blue:hover {
    background: #308ee0 !important;
    color: #fff !important;
    transition: all .3s linear 0s
}

.hi-blue,
.hover-hi-blue:hover {
    background: #00477e !important;
    color: #fff !important;
    transition: all .3s linear 0s
}

.hover-orange:hover,
.orange {
    background: #e06000 !important;
    color: #fff !important;
    transition: all .3s linear 0s
}

.brown,
.hover-brown:hover {
    background: #633517 !important;
    color: #fff !important
}

.grey,
.hover-grey:hover {
    background: gray !important;
    color: #fff !important;
    transition: all .3s linear 0s
}

.hover-light-grey:hover,
.light-grey {
    background: #d3d3d3 !important;
    color: #07090b !important;
    transition: all .3s linear 0s
}

.dark-grey,
.hover-dark-grey {
    background-color: #5a5c68 !important;
    color: #07090b !important;
    transition: all .3s linear 0s
}

.hover-lightin:hover,
.lightin {
    background: #dbdada !important;
    color: #07090b !important;
    transition: all .3s linear 0s
}

.hover-lighter:hover,
.lighter {
    background: #f5f5f5 !important;
    color: #07090b !important;
    transition: all .3s linear 0s
}

.gold,
.hover-gold:hover {
    background: #fcc808 !important;
    color: #07090b !important;
    transition: all .3s linear 0s
}

.hover-txt-red:hover,
.txt-red {
    color: #dc261b !important
}

.hover-txt-green:hover,
.txt-green {
    color: #20b2aa !important
}

.hover-txt-deep-green:hover,
.txt-deep-green {
    color: #004d33 !important
}

.hover-txt-light-green:hover,
.txt-light-green {
    color: #00c242 !important
}

.hover-txt-blue:hover,
.txt-blue {
    color: #308ee0 !important
}

.hover-txt-hi-blue:hover,
.txt-hi-blue {
    color: #00477e !important
}

.hover-txt-orange:hover,
.txt-orange {
    color: #e06000 !important
}

.hover-txt-brown:hover,
.txt-brown {
    color: #633517 !important
}

.hover-txt-white:hover,
.txt-white {
    color: #fff !important
}

.alpha-white a,
.hover-txt-black:hover,
.txt-black {
    color: #07090b !important
}

.hover-txt-grey:hover,
.txt-grey {
    color: gray !important
}

.hover-txt-light-grey:hover,
.txt-light-grey {
    color: #d3d3d3 !important
}

.txt-dark-grey {
    color: #5a5c68 !important
}

.hover-txt-lightin:hover,
.txt-lightin {
    color: #dbdada !important
}

.hover-txt-lighter:hover,
.txt-lighter {
    color: #f5f5f5 !important
}

.hover-txt-gold:hover,
.txt-gold {
    color: #fcc808 !important
}

.facebook {
    background-color: #3b5998 !important
}

.facebook,
.facebook a:hover,
.facebook:hover,
.instagram a:hover,
.instagram:hover,
.linkedin a:hover,
.linkedin:hover,
.telegram a:hover,
.telegram:hover,
.twitter,
.twitter a:hover,
.twitter:hover,
.whatsapp a:hover,
.whatsapp:hover {
    color: #fff
}

.twitter {
    background-color: #55acee !important
}

.linkedin,
.whatsapp {
    background-color: #0077b5 !important;
    color: #fff
}

.whatsapp {
    background-color: #00c242 !important
}

.instagram,
.telegram {
    background-color: #612904 !important;
    color: #fff
}

.telegram {
    background-color: #0b3f61 !important
}

.txt-facebook {
    color: #3b5998 !important
}

.txt-twitter {
    color: #55acee !important
}

.txt-linkedin {
    color: #0077b5 !important
}

.txt-whatsapp {
    color: #00c242 !important
}

.txt-instagram {
    color: #612904 !important
}

.txt-telegram {
    color: #0b3f61 !important
}

.alpha-white {
    background: rgba(255, 255, 255, .8);
    color: #07090b
}

.alpha-black {
    background: rgba(0, 0, 0, .8);
    color: #fff
}

.alpha-black a,
.alpha-red a,
.tacker-light a {
    color: #fff !important
}

.alpha-red {
    background: rgba(120, 20, 20, .8);
    color: #fff
}

.tacker-light {
    background: rgba(31, 48, 87, .6);
    color: #fff
}

.txt-links-grey a,
.txt-links-white a {
    color: gray;
    transition: all .3s linear 0s
}

.txt-links-grey a:hover {
    color: #07090b
}

.txt-links-white a {
    color: #d3d3d3
}

.txt-links-white a:hover {
    color: #fff
}

.pad0 {
    padding: 0 !important
}

.padtb0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

.padlr0 {
    padding-left: 0 !important;
    padding-right: 0 !important
}

.pad2 {
    padding: 2px !important
}

.pad4 {
    padding: 4px !important
}

.pad8 {
    padding: 8px !important
}

.pad12 {
    padding: 12px !important
}

.pad16 {
    padding: 16px !important
}

.padtb4 {
    padding-top: 4px !important;
    padding-bottom: 4px !important
}

.padtb8 {
    padding-top: 8px !important;
    padding-bottom: 8px !important
}

.padtb12 {
    padding-top: 12px !important;
    padding-bottom: 12px !important
}

.padtb16 {
    padding-top: 16px !important;
    padding-bottom: 16px !important
}

.padtb24 {
    padding-top: 24px !important;
    padding-bottom: 24px !important
}

.padtb32 {
    padding-top: 32px !important;
    padding-bottom: 32px !important
}

.padtb40 {
    padding-top: 40px !important;
    padding-bottom: 40px !important
}

.padtb62 {
    padding-top: 62px !important;
    padding-bottom: 62px !important
}

.padtb100 {
    padding-top: 100px !important;
    padding-bottom: 100px !important
}

.padlr4 {
    padding-left: 4px !important;
    padding-right: 4px !important
}

.padlr8 {
    padding-left: 8px !important;
    padding-right: 8px !important
}

.padlr12 {
    padding-left: 12px !important;
    padding-right: 12px !important
}

.padlr16 {
    padding-left: 16px !important;
    padding-right: 16px !important
}

.padlr32 {
    padding-left: 32px !important;
    padding-right: 32px !important
}

.padlr62 {
    padding-left: 62px !important;
    padding-right: 62px !important
}

.padlr100 {
    padding-left: 100px !important;
    padding-right: 100px !important
}

.margin-0 {
    margin: 0
}

.margin-bottom-0 {
    margin-bottom: 0
}

.margin-top {
    margin-top: 5px
}

.margin-bottom {
    margin-bottom: 5px
}

.margin-top-10 {
    margin-top: 10px
}

.margin-bottom-10 {
    margin-bottom: 10px
}

.margin-top-15 {
    margin-top: 15px
}

.margin-bottom-15 {
    margin-bottom: 15px;
}

.margin-tb-5 {
    margin-top: 5px;
    margin-bottom: 5px
}

.margin-tb-10 {
    margin-top: 10px;
    margin-bottom: 10px
}

.margin-tb-20 {
    margin-top: 20px;
    margin-bottom: 20px
}

.margin-lr-5 {
    margin-left: 5px;
    margin-right: 5px
}

.margin-lr-10 {
    margin-left: 10px;
    margin-right: 10px
}

.margin-lr-20 {
    margin-left: 20px;
    margin-right: 20px
}

.center-item {
    margin-left: auto;
    margin-right: auto
}

.txt8 {
    font-size: 8px !important
}

.txt10 {
    font-size: 10px !important
}

.txt12 {
    font-size: 12px !important
}

.txt14 {
    font-size: 14px !important
}

.txt16 {
    font-size: 16px !important
}

.txt18 {
    font-size: 18px !important
}

.txt24 {
    font-size: 24px !important
}

.txt34 {
    font-size: 34px !important
}

.txt40 {
    font-size: 40px !important
}

.txt50 {
    font-size: 50px !important
}

.txt64 {
    font-size: 64px !important
}

.txt75 {
    font-size: 75px !important
}

.txt100 {
    font-size: 100px !important
}

.uppercase {
    text-transform: uppercase
}

.lowercase {
    text-transform: lowercase
}

.capitalize {
    text-transform: capitalize
}

.underline {
    text-decoration: underline
}

.overline {
    text-decoration: overline
}

.line-through {
    text-decoration: line-through
}

.bold {
    font-weight: 700
}

.bolder {
    font-weight: bolder
}

.txt-left {
    text-align: left
}

.txt-right {
    text-align: right
}

.txt-center {
    text-align: center
}

.txt-justify {
    text-align: justify
}

@media all and (min-width:768px) {
    .txt-right-center,
    .txt-right-left {
        text-align: right
    }
    .txt-center-left {
        text-align: center
    }
}

@media all and (max-width:767px) {
    .txt-left-center,
    .txt-right-center {
        text-align: center
    }
    .txt-left-right {
        text-align: right
    }
}

.txt-3d {
    text-transform: uppercase;
    font-family: verdana;
    font-weight: 700;
    text-shadow: 1px 1px 1px #919191, 1px 2px 1px #919191, 1px 3px 1px #919191, 1px 18px 6px rgba(16, 16, 16, .4), 1px 22px 10px rgba(16, 16, 16, .2), 1px 25px 35px rgba(16, 16, 16, .2), 1px 30px 60px rgba(16, 16, 16, .4)
}

img.img-responsive {
    width: 100%
}

@media all and (min-width:768px) {
    .imginside-150 {
        height: 150px;
        overflow: hidden
    }
    .imginside-200,
    .imginside-300 {
        height: 200px;
        overflow: hidden
    }
    .imginside-300 {
        height: 300px
    }
}

.img-effect,
.img-effect-in-e {
    transition: all .2s 0s
}

.img-effect-in-e:hover img,
.img-effect:hover {
    opacity: .8;
    cursor: pointer
}

.img-effect-in-e:hover img {
    transform: scale(1.1)
}

.img-effect-in-e:hover img.top-txt {
    vertical-align: top
}

.img-effect-in-e:hover img.bottom-txt {
    vertical-align: bottom
}

.gallery_item {
    margin-bottom: 30px
}

.gallery_item img {
    max-width: 100%
}

.gallery_item .gallery_img {
    position: relative
}

.gallery_item .gallery_img .hover {
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .5);
    width: 100%;
    text-align: center;
    font-size: 24px;
    height: 100%;
    color: #fff;
    -webkit-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
    opacity: 0
}

.gallery_item .gallery_img .hover i {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #fff
}

.drw-back:before:hover,
.drw-in:after:hover,
.drw-in:before:hover,
.drw-out:after:hover,
.drw-out:before:hover,
.drw:after:hover,
.gallery_item .gallery_img:hover .hover {
    opacity: 1
}

.label {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 5px;
    background-color: #f5f5f5;
    font-size: 12px
}

.drw-back:before,
.drw-in:after,
.drw-in:before,
.drw-out:after,
.drw-out:before,
.drw:after {
    opacity: .5;
    transition: .5s linear;
    padding-left: 5px;
    padding-right: 5px
}

.drw-back:before,
.drw-in:after {
    content: "«"
}

.drw-out:after,
.drw:after {
    content: "»"
}

.drw-out:before {
    content: "«"
}

.drw-in:before {
    content: "»"
}

.text-shadow {
    text-shadow: 0 0 1px currentcolor
}

.box-shadow-small {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
    transition: all .3s linear 0s
}

.box-shadow-hover:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2)
}

.box-shadow-big {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19)
}

.none {
    display: none !important
}

.block {
    display: block !important
}

.inline-block {
    display: inline-block !important
}

.inline {
    display: inline !important
}

@media all and (min-width:768px) {
    .block-none {
        display: block !important
    }
    .inline-block-none {
        display: inline-block !important
    }
    .none-block,
    .none-inline-block {
        display: none !important
    }
}

@media all and (max-width:767px) {
    .block-none,
    .inline-block-none {
        display: none !important
    }
    .none-block {
        display: block !important
    }
    .none-inline-block {
        display: inline-block !important
    }
}

.m-holder {
    display: none;
    position: fixed;
    z-index: 20000;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, .7)
}

#m-caption,
.m-content {
    margin: auto;
    display: block;
    width: auto;
    max-width: 700px
}

@media only screen and (max-width:700px) {
    .m-content {
        width: 95%
    }
}

#m-caption {
    width: 80%;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px
}

.m-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: 700;
    transition: .3s
}

.m-close:focus,
.m-close:hover {
    color: #bbb;
    text-decoration: none;
    cursor: pointer
}

.skills-container {
    width: 100%;
    background-color: #ddd
}

.skills {
    text-align: right;
    padding-left: 2px;
    padding-right: 20px;
    line-height: 15px;
    font-size: 13px;
    color: #fff
}

.notifier>a {
    display: inline-block;
    padding: 1px 10px;
    position: relative
}

.notifier>a>span {
    position: absolute;
    top: 4px;
    left: 43%;
    color: #fff;
    font-size: 12px;
    display: block;
    padding: 0 3px;
    background: #dc261b;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 50%
}

.pre_loader {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 21000;
    text-align: center;
    padding-top: 20vh
}

.pre_loader-spinner {
    display: inline-block;
    border: 5px solid #f5f5f5;
    border-radius: 50%;
    border-top-color: #07090b;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite
}

.dash-autoCompleteDrop {
    position: relative
}

.dash-autoCompleteDrop ul {
    position: absolute;
    left: 0;
    z-index: 1000;
    display: block;
    width: 100%;
    background: #f5f5f5;
    list-style: none;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2)
}

.dash-autoCompleteDrop ul li a {
    color: #07090b;
    display: block;
    padding: 12px;
    cursor: pointer
}

.dash-autoCompleteDrop ul li a:hover {
    background: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2)
}

.dash-autoCompleteDrop .clear-autoCompleteDropSearch {
    position: absolute;
    top: 5px;
    right: 3px;
    z-index: 999;
    display: inline-block;
    background: #f5f5f5;
    color: #07090b;
    border-radius: 50%;
    height: 25px;
    width: 25px;
    text-align: center;
    cursor: pointer;
    line-height: 20px
}

.item-middle {
    display: flex;
    align-items: flex-start
}

.item-middle>* {
    align-self: center;
    margin: 0 auto
}

.fading {
    animation: fading 2s linear 0s infinite
}

.spin {
    animation: spin 2s linear 0s infinite
}

.shake {
    animation: shake .3s linear 0s infinite alternate
}

.zoom-in {
    animation: zoom-in .3s linear 0s infinite
}

.drop-ani {
    animation: drop .3s linear
}

.glow-red {
    color: #fff;
    animation: glowing_red 1500ms infinite
}

.check-cover {
    display: inline-block;
    line-height: 25px;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    user-select: none
}

.check-cover input {
    position: absolute;
    opacity: 0;
    cursor: pointer
}

.check-cover .checkmark {
    position: absolute;
    top: -5px;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: gray;
    transition: all .3s linear 0s
}

.check-cover .checkmark::after {
    content: "";
    position: absolute;
    display: none
}

.check-cover:hover input~.checkmark {
    background-color: #ccc
}

.check-cover input:checked~.checkmark {
    background-color: #00c242
}

.check-cover input:checked~.checkmark:after {
    display: block
}

.check-cover .checkmark:after {
    left: 10px;
    top: 7px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg)
}

.snackbar {
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 10000
}

.snackbar.top-right {
    top: 30px;
    right: 30px
}

.snackbar.top-left {
    top: 30px;
    left: 30px
}

.snackbar.bottom-right {
    bottom: 30px;
    right: 30px
}

.snackbar.bottom-left {
    bottom: 30px;
    left: 30px
}

.snackbar.top-center {
    top: 30px;
    left: 50%
}

.snackbar.bottom-center {
    bottom: 30px;
    left: 50%;
    width: auto;
    min-width: 100px
}

@media screen and (min-width:801px) {
    .snackbar.bottom-center,
    .snackbar.top-center {
        transform: translate(-50%, -22%)
    }
}

@media screen and (max-width:800px) {
    .snackbar.bottom-center,
    .snackbar.top-center {
        left: 10%;
        transform: translate(50%, -20%)
    }
}

@media screen and (max-width:767px) {
    .snackbar.bottom-center,
    .snackbar.bottom-left,
    .snackbar.bottom-right,
    .snackbar.top-center,
    .snackbar.top-left,
    .snackbar.top-right {
        left: 0
    }
    .snackbar {
        width: 100%
    }
    .snackbar.bottom-center,
    .snackbar.bottom-left,
    .snackbar.bottom-right {
        bottom: 0
    }
    .snackbar.bottom-center,
    .snackbar.top-center {
        transform: translate(0)
    }
}

.custom-alert {
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: .25rem
}

#boxHang,
.hang-holder {
    position: fixed;
    top: 0;
    z-index: 1200;
    display: none
}

#boxHang {
    background: rgba(0, 0, 0, .7);
    width: 100%;
    height: 100%;
    left: 0
}

.hang-holder {
    width: 40vw;
    background: #fff
}

.hang-holder.right {
    right: 0
}

@media screen and (min-width:768px) {
    .hang-holder.big {
        width: 90%
    }
}

@media screen and (max-width:767px) {
    .hang-holder {
        width: 100%
    }
}

.hang-holder .hang-dialog {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    overflow-y: auto
}

.hang-holder .hang-body,
.hang-holder .hang-footer,
.hang-holder .hang-header {
    width: 100%;
    padding: 12px 20px
}

.hang-holder .hang-header {
    border-bottom: 1px solid gray
}

.hang-holder .hang-footer {
    border-top: 1px solid gray
}

.hang-holder .hang-body {
    min-height: 200px
}

.box-hang.show {
    display: block
}

.closebtn,
.hang-close {
    margin-left: 15px;
    font-weight: 700;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: .3s
}

.closebtn:hover,
.hang-close:hover {
    color: #000
}

.material-switch input[type=checkbox]:checked+label::before {
    background: inherit;
    opacity: .5
}

.material-switch input[type=checkbox]:checked+label::after {
    background: inherit;
    left: 20px
}

.material-switch label {
    cursor: pointer;
    height: 0;
    position: relative;
    width: 40px
}

.material-switch label::after,
.material-switch label::before {
    content: "";
    margin-top: -8px;
    position: absolute;
    transition: all .3s linear 0s
}

.material-switch label::before {
    background: #07090b;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, .8);
    border-radius: 8px;
    height: 16px;
    opacity: .3;
    width: 40px
}

.material-switch label::after {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .8);
    height: 24px;
    left: -4px;
    top: -4px;
    width: 24px
}

.confirm-txt,
.cus-file-input span {
    display: inline-block;
    font-weight: 600
}

.confirm-txt {
    color: green;
    width: 150px;
    height: 150px;
    border: 8px solid currentcolor;
    border-radius: 50%;
    text-align: center;
    font: 20px/30px arial;
    padding-top: 40px
}

.cus-file-input {
    height: auto
}

.card-radio-btn .crb-input-element,
.cus-file-input input,
.ts-rating-feedback .ts-rating input {
    display: none
}

.cus-file-input span {
    padding: 5px 10px;
    background-color: #f5f5f5;
    color: #07090b;
    position: relative;
    margin-right: 30px;
    border-radius: 0 8px 8px 0;
    word-break: break-all
}

.cus-file-input span .remove-choosen-file {
    display: block;
    position: absolute;
    top: 0;
    right: -30px;
    padding: 6px 10px;
    height: 100%
}

.card-radio-btn {
    width: 100%
}

.card-radio-btn .crb-details {
    margin: 10px;
    padding: 0
}

.card-radio-btn .crb-details:hover {
    cursor: pointer
}

.card-radio-btn .crb-input-element:checked+.crb-details {
    box-shadow: 0 0 2px 1px currentcolor;
    border-radius: 10px
}

.card-radio-btn .crb-input-element:checked+.crb-details::after {
    position: absolute;
    top: 2px;
    right: 20px;
    text-align: center;
    content: "✔";
    width: 25px;
    height: 25px;
    line-height: 25px;
    border-radius: 50%;
    border: 2px solid currentColor
}

.modal-full {
    min-width: 100%;
    margin: 0
}

.modal.custom {
    outline: 0
}

@media all and (min-width:768px) {
    .modal.custom .modal-dialog {
        width: 80%;
        margin: 0 auto
    }
    .collapse-d-lg {
        display: block !important
    }
}

@media all and (max-width:767px) {
    .modal.custom .modal-dialog {
        width: 100%;
        margin: 0 auto
    }
}

.display-item-with-icon {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    justify-content: center
}

.display-item-icon-top {
    width: 32%;
    margin: 10px 5px
}

.display-item-icon-top .display-item-icon {
    text-align: center;
    font-size: 100px;
    font-weight: 600;
    width: 150px;
    height: 150px;
    line-height: 150px;
    margin: auto;
    position: relative
}

.display-item-icon-top .display-item-icon.sm {
    font-size: 20px;
    font-weight: 500;
    width: 100px;
    height: 100px
}

.display-item-icon-top .display-item-icon.md {
    font-size: 50px;
    width: 200px;
    height: 200px
}

.display-item-icon-top .display-item-title {
    text-align: center;
    padding: 20px 5px 15px;
    text-transform: uppercase;
    font: 600 34px/34px Consolas, serif;
    overflow: hidden;
    text-overflow: ellipsis
}

.display-item-text {
    text-align: center
}

.blog-list {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    align-content: space-around
}

.blog-card {
    width: 32%;
    margin: 10px 5px
}

.blog-card .blog-img {
    overflow: hidden;
    width: 100%
}

.blog-card .blog-img img {
    width: 100% !important;
    transition: all .3s linear 0s
}

.blog-card:hover img {
    opacity: .8;
    cursor: pointer
}

.blog-card .blog-desc {
    display: block;
    padding: 8px 0;
    overflow: hidden;
    overflow-y: auto
}

.blog-card .blog-title {
    display: block;
    font: 600 24px/24px Consolas, serif;
    padding: 15px 0;
    color: #07090b
}

.blog-card .blog-short-desc {
    width: 100%;
    font-size: 14px;
    padding-bottom: 10px;
    color: gray
}

@media screen and (max-width:1200px) {
    .blog-card,
    .display-item-icon-top {
        width: 48%
    }
}

@media screen and (max-width:900px) {
    .blog-card,
    .display-item-icon-top {
        width: 48%
    }
}

@media screen and (max-width:600px) {
    .blog-card,
    .display-item-icon-top {
        width: 100%
    }
}

.grid {
    margin: 15px auto;
    column-count: 3
}

@media (max-width:1200px) {
    .grid {
        column-count: 3
    }
}

@media (max-width:1000px) {
    .grid {
        column-count: 3
    }
}

@media (max-width:800px) {
    .grid {
        column-count: 2
    }
}

@media (max-width:400px) {
    .grid {
        column-count: 1
    }
}

.grid .grid-child {
    display: block;
    position: relative;
    margin-bottom: 15px;
    color: #fff;
    overflow: hidden
}

.grid .grid-child img {
    transition: all .3s linear 0s
}

.grid .grid-child:hover img {
    transform: scale(1.1)
}

.grid .grid-img-count {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, .8);
    display: block;
    padding: 10px
}

.grid .grid-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, .6);
    padding: 20px 10px
}

.my-timeline {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%
}

.my-timeline .tl-items::before,
.my-timeline::before {
    content: "";
    background-color: #1f3057;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px
}

.my-timeline .tl-break {
    background: #1f3057;
    color: #fff;
    margin: 15px auto;
    padding: 10px 10px 10px 50px;
    border-radius: .25rem
}

.my-timeline .tl-items {
    position: relative;
    width: 100%;
    margin-bottom: 15px
}

.my-timeline .tl-items::before {
    top: 3px;
    width: 25px;
    height: 25px;
    background-color: #fff;
    border: 7px solid #1f3057;
    border-right-color: transparent;
    margin-left: -10px
}

.my-timeline .tl-items .tl-content {
    width: 93%;
    margin-left: 7%;
    border: 1px solid #dbdada;
    border-left: 5px solid #1f3057;
    border-radius: 8px
}

.my-timeline .tl-items .tl-content::before {
    content: "";
    position: absolute;
    top: 5px;
    border: 15px solid transparent;
    border-right-color: #1f3057;
    z-index: 10;
    margin-left: -35px
}

.my-timeline .tl-items .tl-content>div {
    padding: 10px
}

.my-timeline .tl-items .tl-content .tl-header {
    border-radius: 8px 8px 0 0
}

.my-timeline .tl-items .tl-content .tl-body {
    border-radius: 8px
}

.my-timeline .tl-items .tl-content .tl-footer {
    border-radius: 0 0 8px 8px
}

.my-timeline .tl-items .tl-icon {
    position: absolute;
    left: 0;
    top: -2px;
    color: #fff;
    margin-left: -15px;
    background: #1f3057;
    display: block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    border-radius: 50%;
    text-align: center;
    z-index: 12
}

@media screen and (max-width:900px) {
    .my-timeline::before {
        display: none
    }
    .my-timeline .tl-break {
        text-align: center;
        padding-left: 10px
    }
    .my-timeline .tl-items {
        margin-top: 45px
    }
    .my-timeline .tl-items::before {
        margin-left: -1px;
        border-bottom-color: transparent;
        border-right-color: #1f3057;
        top: 0;
        margin-top: -34px;
        left: 6px;
        border-width: 5px;
        width: 20px;
        height: 20px;
        background: 0 0
    }
    .my-timeline .tl-items .tl-content {
        width: 100%;
        margin-left: 0;
        border-top: 5px solid #1f3057;
        border-left: 1px solid #dbdada
    }
    .my-timeline .tl-items .tl-content::before {
        margin-top: -30px;
        border-right-color: transparent;
        border-bottom-color: #1f3057;
        margin-left: -1px
    }
    .my-timeline .tl-items .tl-icon {
        top: 0;
        margin-top: -40px;
        margin-left: 0;
        width: 30px;
        height: 30px;
        line-height: 30px
    }
}

.countdown-date {
    text-align: center
}

.countdown-date span {
    display: inline-block;
    text-align: center
}

.countdown-date.sh span::after {
    font-size: 14px
}

.countdown-date.sh span:nth-child(1)::after {
    content: "d"
}

.countdown-date.sh span:nth-child(2)::after {
    content: "h"
}

.countdown-date.sh span:nth-child(3)::after {
    content: "m"
}

.countdown-date.sh span:nth-child(4)::after {
    content: "s"
}

.countdown-date.mid span::after {
    font-size: 12px;
    padding-right: 2px
}

.countdown-date.mid span:nth-child(1)::after {
    content: "days"
}

.countdown-date.mid span:nth-child(2)::after {
    content: "hrs"
}

.countdown-date.mid span:nth-child(3)::after {
    content: "mins"
}

.countdown-date.mid span:nth-child(4)::after {
    content: "secs"
}

.countdown-date.circles span {
    border: 3px solid currentcolor;
    border-radius: 50%;
    width: 90px;
    height: 90px;
    line-height: 90px;
    margin-right: 10px;
    margin-bottom: 5px;
    text-transform: uppercase
}

.countdown-date.column span::after {
    font-size: 14px
}

.countdown-date.column span:nth-child(1)::after {
    content: "d:"
}

.countdown-date.column span:nth-child(2)::after {
    content: "h:"
}

.countdown-date.column span:nth-child(3)::after {
    content: "m:"
}

.countdown-date.column span:nth-child(4)::after {
    content: "s"
}

.countdown-date.full span {
    width: 150px;
    height: 100px;
    line-height: 25px;
    margin-right: 10px;
    margin-bottom: 5px;
    padding-top: 25px;
    text-transform: uppercase
}

.countdown-date.full span::after {
    display: block;
    font-size: 12px
}

.countdown-date.full span:nth-child(1)::after {
    content: "days"
}

.countdown-date.full span:nth-child(2)::after {
    content: "hours"
}

.countdown-date.full span:nth-child(3)::after {
    content: "minutes"
}

.countdown-date.full span:nth-child(4)::after {
    content: "seconds"
}

.countdown-date.circles.full span {
    height: 100px;
    width: 100px
}

.site-back-color {
    background-color: #1f3057 !important
}

.site-back-color,
.site-back-color a {
    color: #fff !important
}

.site-back-color-light {
    background: rgba(31, 48, 87, .6);
    color: #fff
}

.site-links-color,
.site-txt-color,
.site-txt-color:hover {
    color: #1f3057 !important;
    transition: all .3s linear 0s
}

.ts-rating-feedback {
    max-width: 360px;
    background-color: #fff;
    width: 100%;
    padding: 30px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    box-shadow: 0 4px 30px rgba(0, 0, 0, .05)
}

.ts-rating-feedback .ts-rating {
    display: flex;
    width: 100%;
    justify-content: center;
    overflow: hidden;
    flex-direction: row-reverse;
    height: 150px;
    position: relative
}

.ts-rating-feedback .ts-rating .ts-rating-0 {
    filter: grayscale(100%)
}

.ts-rating-feedback .ts-rating label {
    cursor: pointer;
    width: 40px;
    height: 40px;
    margin-top: auto;
    transition: .3s;
    color: gray;
    font-size: 1.5rem
}

.ts-rating-feedback .ts-rating label::before {
    content: "★ "
}

.ts-rating-feedback .ts-rating input:checked~label,
.ts-rating-feedback .ts-rating input:checked~label~label {
    color: #1e90ff
}

.ts-rating-2:not(:checked)>label:hover,
.ts-rating-2:not(:checked)>label:hover~label,
.ts-rating-feedback .ts-rating input:not(:checked)~label:hover,
.ts-rating-feedback .ts-rating input:not(:checked)~label:hover~label {
    color: #1e90ff
}

.ts-rating-feedback .ts-rating .ts-emoji-wrapper {
    width: 100%;
    text-align: center;
    height: 100px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0
}

.ts-rating-feedback .ts-rating .ts-emoji-wrapper:after,
.ts-rating-feedback .ts-rating .ts-emoji-wrapper:before {
    content: "";
    height: 15px;
    width: 100%;
    position: absolute;
    left: 0;
    z-index: 1
}

.ts-rating-feedback .ts-rating .ts-emoji-wrapper:before {
    top: 0;
    background: linear-gradient(to bottom, #fff 0, #fff 35%, rgba(255, 255, 255, 0) 100%)
}

.ts-rating-feedback .ts-rating .ts-emoji-wrapper:after {
    bottom: 0;
    background: linear-gradient(to top, #fff 0, #fff 35%, rgba(255, 255, 255, 0) 100%)
}

.ts-rating-feedback .ts-rating .ts-emoji-wrapper .ts-emoji {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: .3s
}

.ts-rating-feedback .ts-rating .ts-emoji-wrapper .ts-emoji svg {
    margin: 15px 0;
    width: 70px;
    height: 70px;
    flex-shrink: 0
}

.ts-rating-feedback .ts-rating #ts-rating-1:checked~.ts-emoji-wrapper>.ts-emoji {
    transform: translateY(-100px)
}

.ts-rating-feedback .ts-rating #ts-rating-2:checked~.ts-emoji-wrapper>.ts-emoji {
    transform: translateY(-200px)
}

.ts-rating-feedback .ts-rating #ts-rating-3:checked~.ts-emoji-wrapper>.ts-emoji {
    transform: translateY(-300px)
}

.ts-rating-feedback .ts-rating #ts-rating-4:checked~.ts-emoji-wrapper>.ts-emoji {
    transform: translateY(-400px)
}

.ts-rating-feedback .ts-rating #ts-rating-5:checked~.ts-emoji-wrapper>.ts-emoji {
    transform: translateY(-500px)
}

.ts-rating-2,
.ts-rating-view-1 {
    display: flex;
    width: 100%;
    justify-content: left;
    overflow: hidden;
    flex-direction: row-reverse;
    height: auto;
    min-height: 50px;
    position: relative
}

.ts-rating-2:not(:checked)>input,
.ts-rating-view-1:not(:checked)>input {
    display: none
}

.ts-rating-2:not(:checked)>label {
    width: 7em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    color: #ddd;
    position: relative;
    font-size: 14px;
    display: block;
    text-align: center;
    line-height: 55px
}

.ts-rating-2:not(:checked)>label:before {
    content: "★ ";
    position: absolute;
    top: -20px;
    font-size: 1.88rem;
    left: 35%
}

.ts-rating-2 input:checked+label:hover,
.ts-rating-2 input:checked+label:hover~label,
.ts-rating-2 input:checked~label,
.ts-rating-2 input:checked~label:hover,
.ts-rating-2 input:checked~label:hover~label,
.ts-rating-2 label:hover~input:checked~label {
    color: #1e90ff
}

.ts-rating-2 label:active {
    position: relative;
    top: 2px;
    left: 2px
}

@media all and (max-width:768px) {
    .ts-rating-2:not(:checked)>label::before {
        font-size: 1.6rem;
        left: 30%
    }
    .ts-rating-2:not(:checked)>label {
        width: 5em;
        font-size: 13px
    }
}

.ts-rating-view-1:not(:checked)>label {
    width: 7em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    color: #ddd;
    position: relative;
    font-size: 14px;
    display: block;
    text-align: center;
    line-height: 55px
}

.ts-rating-view-1:not(:checked)>label:before {
    content: "★ ";
    position: absolute;
    top: -20px;
    font-size: 1.88rem;
    left: 35%
}

.ts-rating-view-1 input:checked~label {
    color: #1e90ff
}

.ts-rating-view-1 label:active {
    position: relative;
    top: 2px;
    left: 2px
}

@media all and (max-width:768px) {
    .ts-rating-view-1:not(:checked)>label::before {
        font-size: 1.6rem;
        left: 30%
    }
    .ts-rating-view-1:not(:checked)>label {
        width: 5em;
        font-size: 13px
    }
}

.heading {
    font-size: 25px;
    margin-right: 25px
}

.ts-rating-view {
    width: 100%
}

.ts-rating-view .ts-rate-bar {
    display: flex;
    margin-bottom: 10px;
    font-size: .88rem
}

.ts-rating-view .ts-rate-bar div:first-child {
    width: 15%
}

.ts-rating-view .ts-rate-bar div:last-child {
    width: 15%;
    text-align: right
}

.ts-rating-view .ts-rate-bar div:nth-child(2) {
    background: #eee;
    width: 70%;
    height: 18px
}

.ts-rating-view .ts-rate-bar div:nth-child(2) div {
    height: 100%
}

@media (max-width:768px) {
    .ts-rating-view .ts-rate-bar {
        flex-wrap: wrap
    }
    .ts-rating-view .ts-rate-bar div:nth-child(2) {
        width: 100% !important;
        order: 3
    }
    .ts-rating-view .ts-rate-bar div:first-child {
        width: 50%;
        order: 1
    }
    .ts-rating-view .ts-rate-bar div:last-child {
        order: 2;
        width: 50%
    }
}

.msg_ {
    position: fixed;
    top: 10%;
    left: 40%;
    z-index: 3000000
}